<template>
  <div>
    <van-nav-bar :title="this.$route.params.key + ' 的搜索结果'" />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.art_id" :title="item.title" :to="`/article?id=${item.art_id}`" />
    </van-list>
  </div>
</template>

<script>
import { searchAPI } from '@/api' 
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
    }
  },
  methods: {
    async onLoad() {
        
        let res = await searchAPI({
            page: this.page,
            q: this.$route.params.key
        })

        // 为了下次调用onLoad就可以查下一页
        this.page++
        this.list.push(...res.data.data.results)
        // 本次请求完了
        this.loading = false 

        // 如果数组数量大于或等于总数量就代表全部加载完毕
        if (this.list.length >= res.data.data.total_count) {
            this.finished = true
        }
    }
  }
}
</script>

<style></style>
